import React from 'react'
import clsx from 'clsx'
import DownloadLine from '../DownloadLine'
import Link from '@docusaurus/Link'
import Translate from '@docusaurus/Translate'
import styles from './styles.module.css'

const products = [
  {
    productName: (
      <Translate
        id="component.download.GetPolyOSMobile.products.1.name"
        description="the name of first Product on Get PolyOS Mobile page">
        For QEMU (riscv64)
      </Translate>
    ),
    version: 'PolyOS Mobile 3.2 beta2',
    downloadLink:
      'https://polyos.iscas.ac.cn/downloads/polyos-mobile-3.2-beta2.img.tar.xz',
  },
  // ...more
]
export default function GetPolyOSMobile(): React.JSX.Element {
  return (
    <div>
      <div className="row row--no-gutters">
        <div className="col col--6">
          <div className="row row--no-gutters">
            <div className="col col--12">
              <p className="hero__subtitle">
                <Translate id="component.download.GetPolyOSMobile.subtitle">
                  Free Download
                </Translate>
              </p>
              <div>
                <ul className={styles.list_info}>
                  <li>
                    <Translate
                      id="component.download.GetPolyOSMobile.release.subtext.1"
                      description="downloadpage PolyOS Mobile release date text">
                      release date: July 30
                    </Translate>
                  </li>
                  <li>
                    <Translate
                      id="component.download.GetPolyOSMobile.release.subtext.2"
                      description="downloadpage PolyOS Mobile release date text">
                      Information
                    </Translate>
                  </li>
                  <li>
                    <Translate
                      id="component.download.GetPolyOSMobile.release.subtext.3"
                      description="downloadpage PolyOS Mobile release date text">
                      Free install
                    </Translate>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div className="row row--no-gutters">
            <div className={clsx('col col--6')}>
              <Link
                className={clsx(
                  'button button--primary button--outline button--lg',
                  styles.guide_button
                )}
                to="/docs/">
                <Translate
                  id="component.download.GetPolyOSMobile.button.GoToGuide.text"
                  description="downloadpage PolyOS Mobile guide button">
                  Go to Guide
                </Translate>
              </Link>
            </div>
            <div className={clsx('col col--6')}>
              <Link
                className={clsx(
                  'button button--link',
                  styles.history_button
                )}
                to="https://polyos.iscas.ac.cn/downloads/">
                <Translate
                  id="component.download.GetPolyOSMobile.button.ReleaseHistory.text"
                  description="downloadpage PolyOS Mobile get history release button">
                  release history
                </Translate>
                {'>>'}
              </Link>
            </div>
          </div>
        </div>
        <div className="col col--6">
          <div className="row row--no-gutters">
            <div className="col col--12">
              {products.map((product, index = 1) => (
                <DownloadLine
                  key={index}
                  productName={product.productName}
                  version={product.version}
                  downloadLink={product.downloadLink}
                />
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
